@import "../../../style/default";

.scrollCss {
  position: relative;
   //border: 1px solid;
  //padding: 10px 5px;

  .top {
    position: relative;
    text-align: center;
    display: none;
    transition: .2s;
    overflow: hidden;
    .scroll-loading {
      top: -5px;
      left: 42%;
    }

    .title {
      position: absolute;
      width: 100%;
      bottom: 10px;
    }
  }

  .bottom {
    position: relative;
    overflow: hidden;
    transition: .2s;
    text-align: center;
    display: none;
    .title {
      width: 100%;
      display: -webkit-box;
      -webkit-box-align: center;
      -webkit-box-pack: center;
      height: 100%;
    }
    .scroll-loading {
      top: 7px;
      left: 39%;
    }
  }

  .scroll-loading {
    position: absolute;
    .k-ball7a {
      border: 0;
      margin: 0;
      width: 10px;
      height: 10px;
      position: absolute;
      border-radius: 50%;
      animation: k-loadingO 2s ease infinite;
      //background: #19a68c;
      background: #00a09d;
      animation-delay: -1.5s
    }
    .k-ball7b {
      border: 0;
      margin: 0;
      width: 10px;
      height: 10px;
      position: absolute;
      border-radius: 50%;
      animation: k-loadingO 2s ease infinite;
      //background: #f63d3a;
      background: #008784;
      animation-delay: -1s
    }
    .k-ball7c {
      border: 0;
      margin: 0;
      width: 10px;
      height: 10px;
      position: absolute;
      border-radius: 50%;
      animation: k-loadingO 2s ease infinite;
      //background: #fda543;
      background: #006361;
      animation-delay: -0.5s
    }
    .k-ball7d {
      border: 0;
      margin: 0;
      width: 10px;
      height: 10px;
      position: absolute;
      border-radius: 50%;
      animation: k-loadingO 2s ease infinite;
      //background: #193b48;
      background: #003a39;
    }
  }

  .no-permission{
    text-align: center;
    font-size: 16px;
    color: #008784;
  }

  @keyframes k-loadingO {
    0%, 100% {
      transform: translate(0)
    }
    25% {
      transform: translate(160%)
    }
    50% {
      transform: translate(160%, 160%)
    }
    75% {
      transform: translate(0, 160%)
    }
  }
}
